<template>
  <el-carousel :height="props.height" :style="{'min-width': props.minWidth}">
    <el-carousel-item v-for="(item, index) in props.list" :key="index">
      <use-image 
        style="cursor: pointer;"
        width="100%"
        :height="props.height" 
        :src="item.url" 
        @click="dataBanner.toLink(item.targetUrl)"
      ></use-image>
    </el-carousel-item>
  </el-carousel>
</template>

<script lang="ts" setup>
const props = defineProps({
  list: {
    type: Array as PropType<Array<{
      id: string,
      url: Promise<string>|string,
      title: string,
      targetUrl: string
    }>>,
    required: true,
  },
  height: {
    type: String,
    default: "500px",
  },
  minWidth: {
    type: String,
    default: "1000px",
  },
})

///////////////////////////////// banner区域 ///////////////////////////////
interface DataBannerType {
  /** 点击banner跳转处理 */
  toLink: (url: string) => void
}
const dataBanner = shallowReactive<DataBannerType>({
  toLink: (url) => {
    useRouter().push(url);
  }
})
</script>

<style lang="scss" scoped>

</style>
